<script setup lang="ts">
	import sheep from '@/sheep';
	const props = defineProps({
		text:{
			type: String,
			default:''
		},
		iconName:{
			type:String,
			default: ''
		},
		navUrl:{
			type:String,
			default: ''
		},
		richTitle:{
			type:String,
			default: ''
		}
	})
	
	function onNavigatorHandler(){
		if(props.richTitle){
			//根据 文章名称获取文章内容
			sheep.$router.go('/pages/public/richtext', {
				title: props.richTitle})
		}
		else if(props.navUrl){
			//不提供文章内容时，根据url跳转到指定页面
			uni.navigateTo({
				url: props.navUrl as unknown as string,
				fail: (err)=>{
					console.log('跳转失败', err)
				}
			})
		}
	}
</script>

<template>
	<view class="content">
	    <up-icon :name="iconName" size="20"></up-icon>
		<view class="text" @tap="onNavigatorHandler">
			<span>{{text}}</span>
			<uni-icons v-if="navUrl || richTitle" type="right" size="24" color="#8f8f8f"></uni-icons>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// page{
	// 	background-color: #ffffff;
	// }
	.content{
		height: 100rpx;
		// border-top: #eee 1rpx solid;
		border-bottom: #eee 1rpx solid;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.5);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0rpx 8rpx 0rpx 8rpx;
		
		
		
		position: relative;
			z-index: 99;
			// padding: 30rpx;
			margin: 8rpx 0rpx 0rpx;
			
		.text{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-left: 32rpx;
			// align-items: center;
			// border: red 1rpx solid;
		}
	}
</style>
